[V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import Link from "next/link" import { motion, AnimatePresence } from "framer-motion" import { Menu, X } from "lucide-react" export default function Navbar() { const [isOpen, setIsOpen] = useState(false) const [scrolled, setScrolled] = useState(false) useEffect(() => { const handleScroll = () => { if (window.scrollY > 10) { setScrolled(true) } else { setScrolled(false) } } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const navLinks = [ { name: "Home", href: "#home" }, { name: "Experience", href: "#experience" }, { name: "Projects", href: "#projects" }, { name: "Skills", href: "#skills" }, { name: "Services", href: "#services" }, { name: "Contact", href: "#contact" }, ] const scrollToSection = (e: React.MouseEvent, href: string) => { e.preventDefault() const targetId = href.replace("#", "") const elem = document.getElementById(targetId) elem?.scrollIntoView({ behavior: "smooth" }) setIsOpen(false) } return (

scrollToSection(e, "#home")}> Aakash4dev {/* Desktop Navigation */}

{navLinks.map((link) => ( scrollToSection(e, link.href)} > {link.name} ))}

{/* Mobile Navigation Toggle */}

{/* Mobile Navigation Menu */} {isOpen && (

{navLinks.map((link, index) => ( scrollToSection(e, link.href)} > {link.name} ))}

)} ) } [V0_FILE]typescriptreact:file="components/custom-cursor.tsx" isQuickEdit="true" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" export default function CustomCursor() { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) const [isHovering, setIsHovering] = useState(false) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { setMousePosition({ x: e.clientX, y: e.clientY }) } const handleMouseOver = (e: MouseEvent) => { if ( e.target instanceof HTMLElement && (e.target.tagName === "A" || e.target.tagName === "BUTTON" || e.target.closest("a") || e.target.closest("button")) ) { setIsHovering(true) } else { setIsHovering(false) } } window.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseover", handleMouseOver) return () => { window.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseover", handleMouseOver) } }, []) return ( <> ) } [V0_FILE]typescriptreact:file="components/social-icon.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import Link from "next/link" import type { ReactNode } from "react" interface SocialIconProps { icon: ReactNode href: string label: string className?: string onClick?: (e: React.MouseEvent) => void } export default function SocialIcon({ icon, href, label, className = "", onClick }: SocialIconProps) { return ( {icon} {label} ) } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isEdit="true" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="lib/utils.ts" isEdit="true" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom scrollbar styles */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #1a1a1a; } ::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #8b5cf6, #ec4899); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, #7c3aed, #db2777); } /* For Firefox */ * { scrollbar-width: thin; scrollbar-color: #8b5cf6 #1a1a1a; } @keyframes glitch { 0% { clip-path: inset(50% 0 30% 0); transform: translate(-5px, 0); } 20% { clip-path: inset(15% 0 65% 0); transform: translate(5px, 0); } 40% { clip-path: inset(45% 0 40% 0); transform: translate(-5px, 0); } 60% { clip-path: inset(25% 0 60% 0); transform: translate(5px, 0); } 80% { clip-path: inset(55% 0 30% 0); transform: translate(-5px, 0); } 100% { clip-path: inset(50% 0 30% 0); transform: translate(0); } } .glitch { animation: glitch 1s infinite; position: relative; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .glitch::before { left: 2px; text-shadow: -2px 0 #8b5cf6; clip: rect(24px, 550px, 90px, 0); animation: glitch-anim 2s infinite linear alternate-reverse; } .glitch::after { left: -2px; text-shadow: -2px 0 #ec4899; clip: rect(85px, 550px, 140px, 0); animation: glitch-anim 2s infinite linear alternate-reverse; } [V0_FILE]javascript:file="tailwind.config.js" isEdit="true" isDeleted="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, "spin-slow": { "0%": { transform: "rotate(0deg)" }, "100%": { transform: "rotate(360deg)" }, }, "reverse-spin-slow": { "0%": { transform: "rotate(360deg)" }, "100%": { transform: "rotate(0deg)" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "spin-slow": "spin-slow 12s linear infinite", "reverse-spin-slow": "reverse-spin-slow 12s linear infinite", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/loading.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { motion, useAnimation } from "framer-motion" export default function Loading() { const [progress, setProgress] = useState(0) const controls = useAnimation() useEffect(() => { const duration = 12 // Total duration in seconds (increased from 6 to 18 for 3x slower) const interval = 50 // Update interval in milliseconds const timer = setInterval(() => { setProgress((prev) => { const next = prev + 100 / ((duration * 500) / interval) if (next >= 100) { clearInterval(timer) return 100 } return next }) }, interval) return () => clearInterval(timer) }, []) useEffect(() => { controls.start({ width: `${progress}%` }) }, [progress, controls]) return (

{/* Main loading bar container */}

{/* Gradient background */} {/* Progress bar */} {/* Glow effect */}

{/* Percentage text */}

{Math.round(progress)}%

{/* Loading text with glitch effect */} Loading...

) } [V0_FILE]typescriptreact:file="components/interactive-shapes.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" import { motion } from "framer-motion" const shapes = [ { type: "circle", size: 50 }, { type: "square", size: 40 }, { type: "triangle", size: 60 }, { type: "circle", size: 30 }, { type: "square", size: 50 }, { type: "triangle", size: 40 }, ] export default function InteractiveShapes() { const containerRef = useRef(null) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { const { clientX, clientY } = e const shapes = containerRef.current?.children if (shapes) { Array.from(shapes).forEach((shape: Element, index) => { const speed = (index + 1) * 0.5 const x = (window.innerWidth - clientX * speed) / 100 const y = (window.innerHeight - clientY * speed) / 100 ;(shape as HTMLElement).style.transform = `translate(${x}px, ${y}px)` }) } } window.addEventListener("mousemove", handleMouseMove) return () => window.removeEventListener("mousemove", handleMouseMove) }, []) return (

{shapes.map((shape, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/contact-email.tsx" isEdit="true" isMerged="true" export default function ContactEmail() { return ( aakash4dev.me@gmail.com ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { Github, Linkedin, Twitter, Calendar, FileText, Blocks, Cpu, Braces, MessageSquare, Smartphone, PenTool, ArrowRight, } from "lucide-react" import { Link as ScrollLink } from "react-scroll" import CustomCursor from "@/components/custom-cursor" import Navbar from "@/components/navbar" import SocialIcon from "@/components/social-icon" import { Button } from "@/components/ui/button" import AboutMe from "@/components/about-me" import Loading from "@/components/loading" import InteractiveShapes from "@/components/InteractiveShapes" import HeaderParticles from "@/components/header-particles" import { BlockchainExplorerImage, BlogPlatformImage, SolidityGeneratorImage, CrossChainBridgeImage, ZkVotingImage, FheMarketplaceImage, } from "@/components/project-images" export default function Home() { const [mounted, setMounted] = useState(false) const [loading, setLoading] = useState(true) useEffect(() => { setMounted(true) const timer = setTimeout(() => { setLoading(false) }, 2000) // Show loading for 2 seconds return () => clearTimeout(timer) }, []) if (!mounted) return null if (loading) return const handleSubmit = (e: React.FormEvent) => { e.preventDefault() console.log("Form submission prevented") } return (

{/* Hero Section with Animated Boxes */}

{/* Image Column - Left aligned on large screens */}

{/* Circular animation in the background */}

{/* Content Column - Right aligned on large screens */}

Hi, I am{" "} Aakash

I'm a{" "} Blockchain Developer

Specializing in Golang, Rust, and core blockchain development. Building secure, scalable solutions with a focus on FHE, ZK proofs, and deep blockchain infrastructure.

{/* Social Icons */}

{/* CTA Buttons */} Schedule a Meet

{/* Experience Section (The Road So Far) */}

{/* Projects Section (What I've Built) */}

What I've Built 🏗️

} link="https://github.com/aakash4dev/blockchain-explorer" /> } link="https://github.com/aakash4dev/decentralized-blog" /> } link="https://github.com/aakash4dev/solidity-generator" /> } link="https://github.com/aakash4dev/cross-chain-bridge" /> } link="https://github.com/aakash4dev/zk-voting" /> } link="https://github.com/aakash4dev/fhe-marketplace" />

{/* Services Section (My Expertise) */}

My Expertise 🛠️

} title="Blockchain Development" description="Custom blockchain solutions, smart contracts, and decentralized applications with a focus on security and efficiency." /> } title="ZK & FHE Implementation" description="Zero-knowledge proofs and fully homomorphic encryption solutions for privacy-preserving applications." /> } title="Full Stack Development" description="End-to-end web application development with modern frameworks and best practices." /> } title="Smart Contract Auditing" description="Comprehensive security audits for smart contracts to identify vulnerabilities and ensure robust implementation." /> } title="Web3 Integration" description="Seamless integration of Web3 technologies into existing applications and platforms." /> } title="Technical Consultation" description="Expert advice on blockchain architecture, technology stack selection, and implementation strategies." />

{/* Contact Section */}

Ping Me 🚀

Prefer to schedule a meeting?

Schedule a Meeting View CV

{/* Footer with Social Links */}

) } function ServiceCard({ icon, title, description }) { return (

{icon}

{title}

{description}

) } function EnhancedProjectCard({ title, description, tags, imageComponent, link }) { return (

{imageComponent}

{title}

{description}

{tags.map((tag, index) => ( {tag} ))}

View Project

) } function ContactEmail() { return (

aakash4dev.me@gmail.com

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import "./globals.css" export const metadata: Metadata = { title: "Aakash Singh Rajput - Blockchain Developer & Full Stack Engineer", description: "Portfolio of Aakash Singh Rajput, a Blockchain Developer and Full Stack Engineer specializing in Web3 technologies.", generator: "Next.js", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/about-me.tsx" isEdit="true" isMerged="true" "use client" import Image from "next/image" import { motion } from "framer-motion" import { Calendar, MapPin, Building2 } from "lucide-react" const timelineData = [ { id: 1, company: "Airchains", role: "Sr Blockchain Developer", period: "Apr 2022 - Present", location: "Gurugram, Haryana, India", type: "Full-time", logo: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-DEsMNlYMWuOymRm7e6c0t8qNlnGmld.png", skills: ["Golang", "Rust", "FHE", "ZK", "Blockchain Infrastructure"], description: "Specializing in Golang, Rust, and core blockchain development, focusing on Fully Homomorphic Encryption (FHE), Zero-Knowledge Proofs (ZK), and deep blockchain infrastructure. Building secure, scalable blockchain solutions, optimizing consensus mechanisms, and advancing cryptographic innovations in decentralized systems.", }, { id: 2, company: "Retcons Technology", role: "Blockchain Developer", period: "Nov 2021 - Mar 2022", location: "Raipur, Chhattisgarh, India", type: "Full-time", logo: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-HOhx6dzS7fVPgGWywMnlx9mykVF4PN.png", skills: ["Solidity", "JavaScript", "Web3"], description: "Started my journey into Web3, Solidity, and blockchain. Explored cryptocurrencies, their underlying algorithms, and investment strategies. Became a bit more extroverted along the way. Had an amazing experience and great moments with friends.", }, { id: 3, company: "QuadKubes Technology", role: "Full Stack Web Developer", period: "Mar 2021 - Aug 2021", location: "India", type: "Internship", logo: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-3GneHILnpMqR0ejz6nnszQtrTCrIyY.png", skills: ["Full Stack Development"], description: "Internship as a Full Stack Web Developer, gaining hands-on experience in web technologies and development practices.", }, { id: 4, company: "Rungta College of Engineering & Technology", role: "Bachelor of Engineering - BE", period: "May 2018 - Jun 2022", location: "Bhilai, India", type: "Education", logo: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-TujRuHbIqQ3EmgqT3E699wMHMeo683.png", skills: ["Computer Science", "Engineering"], description: "Bachelor's degree in Computer Science and Engineering. Grade: 75.5%. Activities: Chess, Dance, Hackathons 👨‍💻", }, ] const skillsData = { Blockchain: [ { name: "Go", proficiency: 90 }, { name: "Rust", proficiency: 85 }, { name: "Solidity", proficiency: 80 }, { name: "Cosmos SDK", proficiency: 75 }, { name: "Ignite CLI", proficiency: 70 }, ], "Full Stack": [ { name: "NextJS", proficiency: 90 }, { name: "Tailwind CSS", proficiency: 85 }, { name: "NodeJS", proficiency: 80 }, { name: "HTML/CSS/JS", proficiency: 95 }, ], "Cloud & Tools": [ { name: "GCP", proficiency: 80 }, { name: "AWS", proficiency: 75 }, { name: "Git", proficiency: 90 }, { name: "Docker", proficiency: 85 }, { name: "ChatGPT", proficiency: 95 }, ], } export default function AboutMe() { return (

{/* Timeline Section */}

The Road So Far 🛤️

{/* Vertical Line (only visible on larger screens) */}

{/* Timeline Items */}

{timelineData.map((item, index) => ( {/* Content */}

{item.role}

{item.company}

{item.period}

{item.location}

{item.type}

{item.description}

{item.skills.length > 0 && (

{item.skills.map((skill, skillIndex) => ( {skill} ))}

)}

{/* Timeline Point (hidden on mobile) */}

{/* Timeline Connector (hidden on mobile) */} {index < timelineData.length - 1 && ( )} ))}

{/* Skills Section */}

Code Arsenal ⚔️

{Object.entries(skillsData).map(([category, skills]) => (

{category}

{skills.map((skill) => ( ))}

))}

) } function SkillBar({ name, proficiency }) { return (

{name} {proficiency}%

) } [V0_FILE]typescript:file="hooks/useThree.ts" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import type * as THREE from "three" export function useThree() { const [three, setThree] = useState(null) useEffect(() => { let isMounted = true const loadThree = async () => { try { const THREE = await import("three") if (isMounted) { setThree(THREE) } } catch (error) { console.error("Failed to load Three.js:", error) } } loadThree() return () => { isMounted = false } }, []) return three } [V0_FILE]json:file="package.json" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "^1.2.2", "@radix-ui/react-alert-dialog": "^1.1.4", "@radix-ui/react-aspect-ratio": "^1.1.1", "@radix-ui/react-avatar": "^1.1.2", "@radix-ui/react-checkbox": "^1.1.3", "@radix-ui/react-collapsible": "^1.1.2", "@radix-ui/react-context-menu": "^2.2.4", "@radix-ui/react-dialog": "^1.1.4", "@radix-ui/react-dropdown-menu": "^2.1.4", "@radix-ui/react-hover-card": "^1.1.4", "@radix-ui/react-label": "^2.1.1", "@radix-ui/react-menubar": "^1.1.4", "@radix-ui/react-navigation-menu": "^1.2.3", "@radix-ui/react-popover": "^1.1.4", "@radix-ui/react-progress": "^1.1.1", "@radix-ui/react-radio-group": "^1.2.2", "@radix-ui/react-scroll-area": "^1.2.2", "@radix-ui/react-select": "^2.1.4", "@radix-ui/react-separator": "^1.1.1", "@radix-ui/react-slider": "^1.2.2", "@radix-ui/react-slot": "^1.1.1", "@radix-ui/react-switch": "^1.1.2", "@radix-ui/react-tabs": "^1.1.2", "@radix-ui/react-toast": "^1.2.4", "@radix-ui/react-toggle": "^1.1.1", "@radix-ui/react-toggle-group": "^1.1.1", "@radix-ui/react-tooltip": "^1.1.6", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.16", "next-themes": "^0.4.4", "react": "^18.2.0", "react-day-picker": "8.10.1", "react-dom": "^18.2.0", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1", "@react-three/drei": "^9.88.0", "@react-three/fiber": "^8.14.5", "expo": "^49.0.0", "three": "^0.157.0", "react-tsparticles": "^2.9.3", "tsparticles": "^2.9.3", "tsparticles-slim": "^2.9.3" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/three-scene.tsx" isEdit="true" isMerged="true" "use client" import { Suspense, useState, useEffect } from "react" import dynamic from "next/dynamic" // Dynamically import Three.js components const DynamicCanvas = dynamic(() => import("@react-three/fiber").then((mod) => mod.Canvas), { ssr: false, }) const DynamicFloatingBoxes = dynamic(() => import("./floating-boxes"), { ssr: false, }) export default function ThreeScene() { const [isClient, setIsClient] = useState(false) useEffect(() => { setIsClient(true) }, []) if (!isClient) { return

} return ( }> ) } [V0_FILE]typescriptreact:file="components/particles-animation.tsx" isEdit="true" isMerged="true" "use client" import { useRef, useMemo, useState } from "react" import { useFrame, useThree } from "@react-three/fiber" import { PointMaterial } from "@react-three/drei" import * as THREE from "three" // Generate random points in a 3D space with a spherical tendency function generatePoints(count: number, radius: number) { const points = new Float32Array(count * 3) for (let i = 0; i < count; i++) { const i3 = i * 3 const theta = Math.random() * Math.PI * 2 const phi = Math.acos(2 * Math.random() - 1) const r = radius * Math.cbrt(Math.random()) // Cube root for more uniform distribution points[i3] = r * Math.sin(phi) * Math.cos(theta) points[i3 + 1] = r * Math.sin(phi) * Math.sin(theta) points[i3 + 2] = r * Math.cos(phi) } return points } function ParticlesInstance({ count = 2000, size = 0.05, radius = 5 }) { const pointsRef = useRef(null) const [hovered, setHovered] = useState(false) const { mouse, viewport, size: canvasSize } = useThree() // Adjust particle count based on screen size const adjustedCount = useMemo(() => { const baseCount = count if (canvasSize.width < 768) return Math.floor(baseCount * 0.5) return baseCount }, [count, canvasSize.width]) // Adjust particle size based on screen size const adjustedSize = useMemo(() => { if (canvasSize.width < 768) return size * 0.8 return size }, [size, canvasSize.width]) // Generate points only once const points = useMemo(() => generatePoints(adjustedCount, radius), [adjustedCount, radius]) // Create a buffer geometry with the points const bufferGeometry = useMemo(() => { const geometry = new THREE.BufferGeometry() geometry.setAttribute("position", new THREE.BufferAttribute(points, 3)) return geometry }, [points]) // Animation frame useFrame((state) => { if (!pointsRef.current) return const time = state.clock.getElapsedTime() // Rotate the entire points system pointsRef.current.rotation.y = time * 0.1 // Get the positions attribute for manipulation const positions = pointsRef.current.geometry.attributes.position // Animate each point for (let i = 0; i < adjustedCount; i++) { const i3 = i * 3 // Get the original position const x = points[i3] const y = points[i3 + 1] const z = points[i3 + 2] // Calculate distance from mouse in normalized coordinates const mouseX = (mouse.x * viewport.width) / 2 const mouseY = (mouse.y * viewport.height) / 2 const dx = mouseX - x const dy = mouseY - y const dist = Math.sqrt(dx * dx + dy * dy) // Apply a wave effect const angle = time * 0.5 + dist * 0.5 const wave = Math.sin(angle) * 0.1 // Apply hover effect - particles move away from mouse when hovered let hoverEffect = 0 if (hovered && dist < 2) { hoverEffect = (1 - dist / 2) * 0.5 } // Update positions with animation positions.setXYZ( i, x + (hovered ? dx * hoverEffect : 0) + Math.sin(time + i * 0.01) * 0.03, y + (hovered ? dy * hoverEffect : 0) + Math.cos(time + i * 0.01) * 0.03, z + wave, ) } positions.needsUpdate = true }) return ( setHovered(true)} onPointerOut={() => setHovered(false)}> ) } export default function ParticlesAnimation() { return } [V0_FILE]typescriptreact:file="components/header-particles.tsx" isEdit="true" isMerged="true" "use client" import { Suspense, useRef, useEffect, useState } from "react" import dynamic from "next/dynamic" import { motion } from "framer-motion" // Dynamically import the Canvas component const DynamicCanvas = dynamic(() => import("@react-three/fiber").then((mod) => mod.Canvas), { ssr: false, }) // Dynamically import our ParticlesAnimation component const DynamicParticlesAnimation = dynamic(() => import("./particles-animation"), { ssr: false, }) export default function HeaderParticles() { const containerRef = useRef(null) const [dimensions, setDimensions] = useState({ width: 0, height: 0 }) const [isClient, setIsClient] = useState(false) useEffect(() => { setIsClient(true) if (!containerRef.current) return const updateDimensions = () => { if (containerRef.current) { setDimensions({ width: containerRef.current.offsetWidth, height: containerRef.current.offsetHeight, }) } } // Initial dimensions updateDimensions() // Update dimensions on resize window.addEventListener("resize", updateDimensions) return () => { window.removeEventListener("resize", updateDimensions) } }, []) if (!isClient) { return null } return ( }> {dimensions.width > 0 && ( )} ) } [V0_FILE]typescriptreact:file="components/ParticleAnimation.tsx" isMerged="true" isEdit="true" "use client" import { useRef, useMemo } from "react" import { Canvas, useFrame } from "@react-three/fiber" import * as THREE from "three" const ParticlesMaterial = new THREE.PointsMaterial({ size: 0.05, map: new THREE.TextureLoader().load("/particle.png"), transparent: true, blending: THREE.AdditiveBlending, depthWrite: false, }) function Particles({ count = 5000 }) { const mesh = useRef(null!) const dummy = useMemo(() => new THREE.Object3D(), []) // Generate random positions, speeds and scales const particles = useMemo(() => { const temp = [] for (let i = 0; i < count; i++) { const t = Math.random() * 100 const factor = 20 + Math.random() * 100 const speed = 0.01 + Math.random() / 200 const xFactor = -50 + Math.random() * 100 const yFactor = -50 + Math.random() * 100 const zFactor = -50 + Math.random() * 100 temp.push({ t, factor, speed, xFactor, yFactor, zFactor, mx: 0, my: 0 }) } return temp }, [count]) // Create the particle geometry const [positions, scales] = useMemo(() => { const positions = new Float32Array(count * 3) const scales = new Float32Array(count) for (let i = 0; i < count; i++) { positions[i * 3] = (Math.random() - 0.5) * 10 positions[i * 3 + 1] = (Math.random() - 0.5) * 10 positions[i * 3 + 2] = (Math.random() - 0.5) * 10 scales[i] = Math.random() } return [positions, scales] }, [count]) useFrame((state, delta) => { particles.forEach((particle, i) => { let { t, factor, speed, xFactor, yFactor, zFactor } = particle t = particle.t += speed / 2 const a = Math.cos(t) + Math.sin(t * 1) / 10 const b = Math.sin(t) + Math.cos(t * 2) / 10 const s = Math.cos(t) particle.mx += (state.mouse.x * state.viewport.width - particle.mx) * 0.01 particle.my += (state.mouse.y * state.viewport.height - particle.my) * 0.01 dummy.position.set( (particle.mx / 10) * a + xFactor + Math.cos((t / 10) * factor) + (Math.sin(t * 1) * factor) / 10, (particle.my / 10) * b + yFactor + Math.sin((t / 10) * factor) + (Math.cos(t * 2) * factor) / 10, (particle.my / 10) * b + zFactor + Math.cos((t / 10) * factor) + (Math.sin(t * 3) * factor) / 10, ) dummy.scale.set(s, s, s) dummy.updateMatrix() mesh.current.setMatrixAt(i, dummy.matrix) }) mesh.current.instanceMatrix.needsUpdate = true }) return ( ) } export default function ParticleAnimation() { return (

) } [V0_FILE]typescriptreact:file="components/ParticleBackground.tsx" isEdit="true" isMerged="true" "use client" import { useCallback, useMemo } from "react" import Particles from "react-tsparticles" import { loadSlim } from "tsparticles-slim" import type { Engine } from "tsparticles-engine" const ParticleBackground = () => { const particlesInit = useCallback(async (engine: Engine) => { await loadSlim(engine) }, []) const options = useMemo( () => ({ background: { color: { value: "transparent", }, }, fullScreen: { enable: false, zIndex: 0, }, fpsLimit: 120, interactivity: { events: { onClick: { enable: true, mode: "push", }, onHover: { enable: true, mode: "repulse", }, resize: true, }, modes: { push: { quantity: 4, }, repulse: { distance: 200, duration: 0.4, }, }, }, particles: { color: { value: ["#8B5CF6", "#EC4899"], // Purple to Pink }, links: { color: "#a855f7", // A mid-point between purple and pink distance: 150, enable: true, opacity: 0.5, width: 1, }, move: { direction: "none", enable: true, outModes: { default: "bounce", }, random: false, speed: 1, straight: false, }, number: { density: { enable: true, area: 800, }, value: 80, }, opacity: { value: 0.5, }, shape: { type: "circle", }, size: { value: { min: 1, max: 5 }, }, }, detectRetina: true, }), [], ) return } export default ParticleBackground [V0_FILE]typescriptreact:file="components/AnimatedBoxes.tsx" isEdit="true" isMerged="true" "use client" import React, { useEffect, useState, useCallback } from "react" interface Box { id: number x: number y: number size: number delay: number } const Box = React.memo(({ x, y, size, delay }: Omit) => (

)) Box.displayName = "Box" const AnimatedBoxes = () => { const [boxes, setBoxes] = useState([]) const generateBoxes = useCallback(() => { const newBoxes: Box[] = [] const boxCount = Math.floor((window.innerWidth * window.innerHeight) / 80000) + 2 // Increased box count for (let i = 0; i < boxCount; i++) { const x = (Math.random() * 0.6 + 0.2) * window.innerWidth const y = (Math.random() * 0.6 + 0.2) * window.innerHeight newBoxes.push({ id: i, x, y, size: Math.random() * 20 + 10, delay: Math.random() * 5, }) } setBoxes(newBoxes) }, []) useEffect(() => { generateBoxes() window.addEventListener("resize", generateBoxes) return () => window.removeEventListener("resize", generateBoxes) }, [generateBoxes]) return (

{boxes.map((box) => ( ))}

) } export default AnimatedBoxes [V0_FILE]typescriptreact:file="components/AnimatedBoxes3D.tsx" isMerged="true" isEdit="true" "use client" import { useRef, useMemo, useState } from "react" import { Canvas, useFrame } from "@react-three/fiber" import { OrbitControls } from "@react-three/drei" import * as THREE from "three" function Box({ position, color }: { position: [number, number, number]; color: THREE.Color }) { const mesh = useRef(null!) const [hovered, setHovered] = useState(false) useFrame((state, delta) => { mesh.current.rotation.x += delta * 0.2 mesh.current.rotation.y += delta * 0.3 }) return ( setHovered(true)} onPointerOut={() => setHovered(false)} scale={hovered ? 1.5 : 1} > ) } function BoxesGroup() { const boxes = useMemo(() => { const temp = [] for (let i = 0; i < 100; i++) { const position: [number, number, number] = [ (Math.random() - 0.5) * 10, (Math.random() - 0.5) * 10, (Math.random() - 0.5) * 10, ] const color = new THREE.Color().setHSL(Math.random(), 0.7, 0.2) // Darker colors temp.push({ position, color }) } return temp }, []) return ( <> {boxes.map((box, index) => ( ))} ) } export default function AnimatedBoxes3D() { return (

) } [V0_FILE]typescriptreact:file="components/InteractiveShapes.tsx" isMerged="true" isEdit="true" "use client" import { useEffect, useRef } from "react" import { motion } from "framer-motion" const shapes = [ { type: "circle", size: 50 }, { type: "square", size: 40 }, { type: "triangle", size: 60 }, ] export default function InteractiveShapes() { const containerRef = useRef(null) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { const { clientX, clientY } = e const shapes = containerRef.current?.children if (shapes) { Array.from(shapes).forEach((shape: Element, index) => { const speed = (index + 1) * 0.5 const x = (window.innerWidth - clientX * speed) / 100 const y = (window.innerHeight - clientY * speed) / 100 ;(shape as HTMLElement).style.transform = `translate(${x}px, ${y}px)` }) } } window.addEventListener("mousemove", handleMouseMove) return () => window.removeEventListener("mousemove", handleMouseMove) }, []) return (

{shapes.map((shape, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/project-images.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" // Function to generate a blockchain explorer visualization export function BlockchainExplorerImage() { const [loaded, setLoaded] = useState(false) useEffect(() => { setLoaded(true) }, []) if (!loaded) return

return (

{Array(6) .fill(0) .map((_, i) => (

))}

) } // Function to generate a blog platform visualization export function BlogPlatformImage() { const [loaded, setLoaded] = useState(false) useEffect(() => { setLoaded(true) }, []) if (!loaded) return

return (

) } // Function to generate a Solidity code generator visualization export function SolidityGeneratorImage() { const [loaded, setLoaded] = useState(false) useEffect(() => { setLoaded(true) }, []) if (!loaded) return

return (

contract

function transfer() {"{"}

// Smart contract code

{"}"}

) } // Function to generate a cross-chain bridge visualization export function CrossChainBridgeImage() { const [loaded, setLoaded] = useState(false) useEffect(() => { setLoaded(true) }, []) if (!loaded) return

return (

) } // Function to generate a ZK voting system visualization export function ZkVotingImage() { const [loaded, setLoaded] = useState(false) useEffect(() => { setLoaded(true) }, []) if (!loaded) return

return (

{Array(4) .fill(0) .map((_, i) => (

))}

) } // Function to generate an FHE marketplace visualization export function FheMarketplaceImage() { const [loaded, setLoaded] = useState(false) useEffect(() => { setLoaded(true) }, []) if (!loaded) return

return (

{Array(4) .fill(0) .map((_, i) => (

))}

🔒

) } [V0_FILE]typescriptreact:file="components/floating-boxes.tsx" isEdit="true" isMerged="true" "use client" import { useRef, useMemo } from "react" import { useFrame } from "@react-three/fiber" import * as THREE from "three" function Box({ position, size, color, speed }) { const mesh = useRef(null!) useFrame((state) => { if (!mesh.current) return // Rotate the box mesh.current.rotation.x += 0.01 * speed mesh.current.rotation.y += 0.01 * speed // Make the box float up and down const time = state.clock.getElapsedTime() mesh.current.position.y = position[1] + Math.sin(time * speed) * 0.5 }) return ( ) } export default function FloatingBoxes() { // Generate random boxes const boxes = useMemo(() => { const temp = [] const count = 10 // Reduced count for better performance for (let i = 0; i < count; i++) { const position: [number, number, number] = [ (Math.random() - 0.5) * 20, (Math.random() - 0.5) * 10, (Math.random() - 0.5) * 10 - 5, // Push boxes back in z-space ] const size = Math.random() * 1.5 + 0.5 const color = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, // Purple to pink hue range 0.7, 0.5, ) const speed = Math.random() * 0.5 + 0.5 temp.push({ position, size, color, speed }) } return temp }, []) return ( <> {boxes.map((box, i) => ( ))} ) } [V0_FILE]typescriptreact:file="hooks/use-responsive.ts" isMerged="true" isEdit="true" "use client" import { useState, useEffect } from "react" export function useResponsive() { const [windowSize, setWindowSize] = useState({ width: typeof window !== "undefined" ? window.innerWidth : 0, height: typeof window !== "undefined" ? window.innerHeight : 0, }) const [isMobile, setIsMobile] = useState(false) const [isTablet, setIsTablet] = useState(false) const [isDesktop, setIsDesktop] = useState(false) useEffect(() => { // Handler to call on window resize function handleResize() { // Set window width/height to state setWindowSize({ width: window.innerWidth, height: window.innerHeight, }) // Update device type setIsMobile(window.innerWidth < 768) setIsTablet(window.innerWidth >= 768 && window.innerWidth < 1024) setIsDesktop(window.innerWidth >= 1024) } // Add event listener window.addEventListener("resize", handleResize) // Call handler right away so state gets updated with initial window size handleResize() // Remove event listener on cleanup return () => window.removeEventListener("resize", handleResize) }, []) return { windowSize, isMobile, isTablet, isDesktop, } } [V0_FILE]typescriptreact:file="components/animated-background.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" export function AnimatedBackground() { const boxes = Array.from({ length: 5 }).map((_, i) => ({ id: i, rotate: Math.random() * 360, scale: 0.5 + Math.random() * 0.5, x: Math.random() * 100 - 50, y: Math.random() * 100 - 50, })) return (

{boxes.map((box) => ( ))}

) } [V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" export function Header() { return (

Hi, I'm Aakash

Full Stack Developer & Tech Enthusiast

) } [V0_FILE]typescriptreact:file="components/contact-form.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { toast } from "@/hooks/use-toast" export function ContactForm() { const [isSubmitting, setIsSubmitting] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) try { const response = await fetch("https://formspree.io/f/xeoajnkn", { method: "POST", body: new FormData(e.currentTarget), headers: { Accept: "application/json", }, }) if (response.ok) { toast({ title: "Message sent!", description: "Thank you for reaching out. I'll get back to you soon.", }) e.currentTarget.reset() } else { throw new Error("Failed to send message") } } catch (error) { toast({ title: "Error", description: "Failed to send message. Please try again.", variant: "destructive", }) } finally { setIsSubmitting(false) } } return (

</div>
      <Button type="submit" className="w-full" disabled={isSubmitting}>
        {isSubmitting ? "Sending..." : "Send Message"}
      </Button>
    </form>
  )
}

[V0_FILE]typescriptreact:file="tailwind.config.ts" isFixed="true" isQuickEdit="true" isEdit="true" isMerged="true"
import type { Config } from "tailwindcss"

const config: Config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        chart: {
          "1": "hsl(var(--chart-1))",
          "2": "hsl(var(--chart-2))",
          "3": "hsl(var(--chart-3))",
          "4": "hsl(var(--chart-4))",
          "5": "hsl(var(--chart-5))",
        },
        sidebar: {
          DEFAULT: "hsl(var(--sidebar-background))",
          foreground: "hsl(var(--sidebar-foreground))",
          primary: "hsl(var(--sidebar-primary))",
          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
          accent: "hsl(var(--sidebar-accent))",
          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
          border: "hsl(var(--sidebar-border))",
          ring: "hsl(var(--sidebar-ring))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: {
            height: "0",
          },
          to: {
            height: "var(--radix-accordion-content-height)",
          },
        },
        "accordion-up": {
          from: {
            height: "var(--radix-accordion-content-height)",
          },
          to: {
            height: "0",
          },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "spin-slow": "spin 8s linear infinite",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
export default config
</article></body></html>

About

Tags

Share

More from aakash4dev

More Templates Like This

About

Tags

Share

About

Tags

Share

More from aakash4dev

More Templates Like This